
// 导入 createElement 函数，该函数用于根据虚拟节点创建 DOM 元素  
import createElement from "./createElement";  
  
// 导出 patchVnode 函数，该函数用于更新虚拟节点对应的 DOM 元素  
export default function patchVnode(newVnode, oldVnode) {  
    // 如果新旧节点相同，则无需更新，直接返回  
    if (oldVnode === newVnode) return;  
  
    // 处理只有文本内容的情况  
    if (newVnode.text !== undefined && (newVnode.children === undefined || newVnode.children.length === 0)) {  
        // 如果新旧节点的文本内容不同，则更新 DOM 元素的文本内容  
        if (oldVnode.text !== newVnode.text) {  
            oldVnode.elm.innerText = newVnode.text;  
        }  
    } else {  
        // 处理有子节点的情况  
        if (oldVnode.children !== undefined && newVnode.children.length > 0) {  
            let un = 0; // 用于跟踪已处理的旧子节点的索引  
            let oldChildren = oldVnode.children; // 获取旧节点的子节点数组  
  
            // 遍历新节点的子节点  
            newVnode.children.forEach(ch => {  
                let isflag = false; // 标记是否找到匹配的旧子节点  
  
                // 遍历旧子节点，查找与新子节点匹配的节点  
                for (let j = 0; j < oldChildren.length; j++) {  
                    if (oldChildren[j].sel === ch.sel && ch.key === oldChildren[j].key) {  
                        isflag = true;  
                        // 如果找到匹配的旧子节点，可以在这里调用 patchVnode 来更新它（如果子节点也需要更新）  
                        break;  
                    }  
                }  
  
                // 如果没有找到匹配的旧子节点，则创建新 DOM 元素并插入到 DOM 树中  
                if (!isflag) {  
                    let dom = createElement(ch); // 根据新子节点创建 DOM 元素  
                    ch.elm = dom; // 将创建的 DOM 元素引用存储在虚拟节点上，以便将来可能使用  
  
                    // 如果索引 un 小于旧子节点的数量，则使用 insertBefore 插入新元素  
                    // 否则，使用 appendChild 添加到末尾  
                    if (un < oldChildren.length) {  
                        oldVnode.elm.insertBefore(dom, oldChildren[un].elm);  
                    } else {  
                        oldVnode.elm.appendChild(dom);  
                    }  
                    
                }  else{
                    un++; // 增加已处理的旧子节点索引  
                    //前段代码关联

                }
                // 如果找到匹配的旧子节点，则可以在此处调用 patchVnode 来进一步更新该子节点（未实现）  
            });  
  
            // 注意：此代码段未实现清理多余的旧子节点的逻辑  
            // 如果新子节点的数量少于旧子节点，你需要遍历并移除多余的旧子节点  
  
        } else {  
            // 旧的没有子节点，但新的有子节点  
            // 首先清空旧 DOM 元素的文本内容（如果有的话）  
            oldVnode.elm.innerText = "";  
  
            // 然后遍历新子节点，为每个新子节点创建 DOM 元素并添加到旧 DOM 元素中  
            newVnode.children.forEach(ch => {  
                let dom = createElement(ch); // 根据新子节点创建 DOM 元素  
                oldVnode.elm.appendChild(dom); // 将创建的 DOM 元素添加到旧 DOM 元素中  
            });  
        }  
    }  
}